<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function addImg() {
				var img1Node = document.getElementById("img1")
				var newNode = document.createElement("img") //创建一个图像节点
				//设置图像相关属性
				newNode.setAttribute("src", "imgs/banner2.jpg")
				newNode.setAttribute("alt", "庆国庆，大优惠！")
				newNode.border = 1
				//在原有图像节点前插入新图像节点
				document.body.insertBefore(newNode, img1Node)
			}

			function copyImg() {
				var img1Node = document.getElementById("img1")
				var copyImageNode = img1Node.cloneNode(false) //复制图像
				document.body.appendChild(copyImageNode) //在body列表的末尾插入图像节点
			}
			/*
			function delImg(){
				var img1Node = document.getElementById("img1")
				document.body.removeChild(img1Node);
			}
			function repImg(){
				var img1Node = document.getElementById("img1")
				var newNode = document.createElement("img")
				newNode.setAttribute("src","imgs/banner2.jpg")
				document.body.replaceChild(newNode,img1Node)
			}
			*/
		</script>
	</head>

	<body>
		<h3>创建并插入节点</h3>
		<input id="copyBtn" type="button" value="复制图像" onclick="copyImg()" />
		<input id="addBtn" type="button" value="增加图像" onclick="addImg()" /><br>
		<img id="img1" src="imgs/banner1.jpg" border="1" alt="图书五折">
	</body>

</html>